function gettext(url, callback) {
    //1.创建AJAX的实例
    let xhr = new XMLHttpRequest();
    //2.创建AJAX的请求
    xhr.open('GET', url);
    //3.发送AJAX的请求
    xhr.send();
    //4.接收服务器相应结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //获取到JSON字符串
                let respJSONStr = xhr.response;
                //将JSON字符串转换为对象的数据格式
                let res = JSON.parse(respJSONStr);
                callback(res)
            }
        }
    }
}
let commodityDetails = document.querySelectorAll(".commodityDetails")
//渲染commodityDetails展示的数据
gettext("scripts/data.json", function (res) {
    for(let i=0;i<commodityDetails.length;i++){
        if(i ==0){
            exhibition(res.CasualSandals,i)
        }
        else if(i ==1){
            exhibition(res.LowHelpCanvas,i)
        }
        else if(i ==2){
            exhibition(res.HighHelpCanvas,i)
        }
    }
 })
 //创建展示数据的函数
 function exhibition(att,i){
    let datas = att
    for(let j=0;j<5;j++){
        commodityDetails[i].innerHTML += `
        <div class="commodityDetailsBox">
                <div>
                    <img src="${datas[j].image}" alt="" title="${datas[j].name}">
                </div>
                <p>${datas[j].name}</p>
                <span>${datas[j].price}</span>
            </div>`
    }
}
//设置主页展示栏的页面跳转点击事件
for(let i in ProductTypesSpan){
    ProductTypesSpan[i].onclick = function(){
        pageJumps("homeone.html")
    }
}
//封装点击跳转的函数
function pageJumps(url){
    location.href = url
}